<style>
.top_label,.top_logo{
    cursor: pointer;
}
html,
body {
    background-color: rgba(243, 245, 246, 1);
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
/*头*/

.top {
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 1);
}

.top_box {
    width: 1180px;
    height: 100%;
    margin: 0 auto;
    align-items: center;
}

.top_logo {
    width: 122px;
    height: 32px;
    margin-right: 78px;
}

.top_label {
    position: relative;
    height: 80px;
    line-height: 80px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin-right: 48px;
}

.top_label_active::after {
    position: absolute;
    content: '';
    display: block;
    height: 4px;
    /*width: 100%;*/
    background-color: #FC2B40;
    bottom: 17px;
    left: 0;
    right:0;
    margin: auto;
    width:32px;

}

.top_down {
    display: inline-block;
    width: 8px;
    height: 8px;
    min-height: 8px;
    width: 8px;
    background: url(__IMG__/down.png) no-repeat center center;
    background-size: 8px 8px;
    margin-left: 4px;
}

.top_avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 8px;
    margin-top: 22px;
}

.top_name {
    font-size: 16px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
}

.top_notice {
    width: 24px;
    height: 24px;
    margin-left: 58px;
}

.top_card {
    position: relative;
    height: 80px;
}

.top_card1 {
    position: absolute;
    top: 75px;
    left: 0;
    width: 170px;
    height: 80px;
    background: #fff;
    border-radius: 4px;
    z-index: 99;
    font-size: 16px;
    font-weight: 400;
}

.top_card2 {
    height: 40px;
    line-height: 40px;
    border-radius: 4px 4px 0px 0px;
    padding-left: 24px;
}
.top_card_active{
    height:40px;
    line-height:40px;
    background:rgba(252,43,64,0.1);
    color:rgba(252,43,64,1);
    padding-left:24px;
}
.top_card3 {
    height: 40px;
    line-height: 40px;
    background: #fff;
    border-radius: 0px 0px 4px 4px;
    color: rgba(102, 102, 102, 1);
    padding-left: 24px;
}
</style>
<div class="top">
    <div class="top_box flex-wrap">
        <img src="__IMG__/logo.png" class="top_logo">
        <div class="top_label {if $Request.controller == 'First'}top_label_active{/if}" onclick="location.href='{:url('shop/first/index')}'" id="index">首页</div>
        <div class="top_label {if $Request.controller == 'Order'}top_label_active{/if}" onclick="openWin(2)" id="order_out">
            订单<span class="top_down"></span>
            <div class="top_card1" style="overflow: hidden" id="order">
                <div class="top_card2 {if $Request.controller == 'Order' && $Request.action == 'add'}top_card_active{/if}" onclick="location.href='{:url('shop/order/add')}'">发布新订单</div>
                <div class="top_card2 {if $Request.controller == 'Order' && $Request.action == 'index'}top_card_active{/if}" onclick="location.href='{:url('shop/order/index')}'">我的订单列表</div>
            </div>
        </div>
        <div class="top_label {if $Request.controller == 'Freight'}top_label_active{/if}"  onclick="location.href='{:url('shop/freight/index')}'">运费计算器</div>
        <div class="top_label {if $Request.controller == 'Duizhang'}top_label_active{/if}"  onclick="location.href='{:url('shop/duizhang/index')}'">对账</div>
        <div class="top_label {if $Request.controller == 'Affairs'}top_label_active{/if}"  onclick="location.href='{:url('shop/Affairs/index')}'">商务合作</div>
        <div class="top_label {if $Request.controller == 'About'}top_label_active{/if}" onclick="openWin(6)" id="about_out">关于我们<span class="top_down"></span>
            <div class="top_card1" style="overflow: hidden" id="about">
                <div class="top_card2 {if $Request.controller == 'About' && $Request.action == 'about'}top_card_active{/if}" onclick="location.href='{:url('shop/About/about')}'">企业精神</div>
                <div class="top_card2 {if $Request.controller == 'About' && $Request.action == 'about1'}top_card_active{/if}" onclick="location.href='{:url('shop/About/about1')}'"  >企业简介</div>
            </div>
        </div>
        <div class="flex-con"></div>
        <div class="top_card" onclick="openWin(7)">
            <img src="{$loginUserInfo.user_image}" class="top_avatar">
            <div class="top_card1"  style="overflow: hidden"  id="user">
                <div class="top_card2" onclick="location.href='{:url('shop/my/index')}'">编辑资料</div>
                <div class="top_card2"  style="background:#fff;color: rgba(51, 51, 51, 1);" onclick="location.href='{:url('shop/login/loginOut')}'">退出登录</div>
            </div>
        </div>
        <div class="top_name" onclick="openWin(7)">{$loginUserInfo.user_username}</div>
        <img src="__IMG__/notice.png" onclick="location.href='{:url('shop/message/index')}'" class="top_notice" onclick="openWin(8)">
    </div>
</div>